import Observer from './observer'
import Complier from './complier'

class Vue {
	constructor(options) {
		this.$options = options
		this.$data = options.data
		this.$el =
			typeof options.el === 'string'
				? document.querySelector(options.el)
				: options.el

		this._proxyData(this.$data)
		new Observer(this.$data)
		new Complier(this)
	}

	_proxyData(data) {
		Object.keys(data).forEach(key => {
			Object.defineProperty(this, key, {
				configurable: true,
				enumerable: true,
				get() {
					return data[key]
				},
				set(newVal) {
					if (newVal === data[key]) {
						return
					}

					data[key] = newVal
				},
			})
		})
	}
}

let vm = new Vue({
	el: '#app',
	data: {
		msg: 'Hello Vue',
		count: 100,
		person: { name: 'zs' },
		html: '<h1 style="color:red;">html内容<h1>',
	},
})

vm.person.age = 12

window.vm = vm
